<#include "layout/layout.ftl">
<div id="toolbar">
 <ul>
 	<li><a id="newFile" href="#">新建</a></li>
 	<li><a id="delFile" href="#">删除</a></li>
 </ul>
</div>
<div id="recordarea" style="float:left;display:inline-block;width:20%">
	<ul>
	 <#if records??>
		<#list records as r>
			<li id="item${r.id}" idValue="${r.id}"><a href="#" id="${r.id}" idValue="${r.id}">${r.subject}</a></li>
		</#list>
	  </#if>
	</ul>
</div>
<div style="float:right;display:inline-block;width:80%">
<script src="/tip/static/jquery-1.5.2.min.js"/>
<@s.actionerror/>
<@s.form validate="true" id="createForm" action="record.action" method="post" namespace="/new" cssStyle="width:100%;height:400px">
		<@s.textfield id="subject" name="subject" value="${(record.subject)!}" label="标题"/>
		<@s.textfield id="tags" name="tags"  value="${(record.tags)!}"  label="标签"/>
		<@s.hidden id="type" name="type"/>
		<@s.hidden  id="recordId" name="id"  value="${(record.id)!}"/>
		<@s.textarea id="body" name="body"  cssStyle="width:100%;height:400px" label="内容" value="${(record.body)!}"/>
		<@s.submit id="btnSave" />
</@s.form>
</div>

<script>
			$("#recordarea>ul>#item${(record.id)!}").addClass("selectedItem");
			$("#recordarea>ul>li>a").click(function(event) {
				 event.preventDefault();
				 //得到一个节点
				 $("#recordarea>ul>li").removeClass("selectedItem");
				 var id=$(this).attr("idValue");
				 $("#recordarea>ul>#item"+id).addClass("selectedItem");
				 
				 $.ajax({
					type: "get",
					url: "http://localhost:8080/tip/data/get.action",
					data:"itemId=" + id,
					success: function(data, textStatus){
						$("#subject").val("");
						$("#tags").val("");
						$("#body").val("");				
						var object = $.parseJSON(data);
						$("#subject").val(object.subject);
						$("#tags").val(object.tags);
						$("#body").val(object.body);
						$("#recordId").val(object.id);
						$("#type").val("update");
						$("#btnSave").val("保存");
					},
					error: function(){
						//请求出错处理
					}
					});
			});
			
			//创建新的记录
			$("#newFile").click(function(event){
				$("#subject").val("");
				$("#tags").val("");
				$("#body").val("");
				$("#btnSave").val("创建");
				$("#createForm").attr("action","record.action");
				$("#type").val("");
				$("#createForm").attr("namespace","/new");
				event.preventDefault();
			});
			//删除记录
			$("#delFile").click(function(event){
				event.preventDefault();
				if(!window.confirm("确定要删除吗？")){
					return;
				}
				var id = $(".selectedItem>a").attr("idValue");
				$.ajax({
					type:"post",
					url:"http://localhost:8080/tip/data/delete.action",
					data:"id="+id,
					success: function(data, textStatus){
					      $(".selectedItem").remove();
					      $("#subject").val("");
						  $("#tags").val("");
						  $("#body").val("");
						  $("#type").val("");
						  $("#createForm").attr("action","record.action");
						  $("#btnSave").val("创建");
					},
					error:function(){
					}
				});
			});
</script>

</body>
</html>
